<template>
  <div class="container">
    <!-- 测试用例表格 -->
    <div v-loading="loading">
      <el-table ref="itemTestCaseRef" stripe :data="requirementCaseList" row-key="ID"
        highlight-current-row>
        <el-table-column type="expand" fixed width="30">
          <template #default="props">
            <el-descriptions class="margin-top" title="用例详情：" :column="6" size="small">
              <el-descriptions-item label="项目名称：" :span="1">{{ props.row.pname }}</el-descriptions-item>
              <el-descriptions-item label="用例名称：" align="left" :span="4">{{
                props.row.testCaseName}}</el-descriptions-item>
              <el-descriptions-item label="用例编写人：" :span="1">{{ props.row.caseEditMembers }}</el-descriptions-item>

              <el-descriptions-item label="项目分支名称：" :span="2">{{ props.row.pNameBranch }}</el-descriptions-item>
              <el-descriptions-item label="功能模块：" :span="2">{{ props.row.funcModules }}</el-descriptions-item>
              <el-descriptions-item label="二级功能模块：" :span="2">{{ props.row.funcModulesChild }}</el-descriptions-item>

              <el-descriptions-item label="前置条件：" :span="3">{{ props.row.beforeConditions }}</el-descriptions-item>
              <el-descriptions-item label="用例优先级：" :span="3">{{ props.row.testCasePriority }}</el-descriptions-item>

              <el-descriptions-item label="操作步骤：" :span="6">
                <el-input v-if="props.row.operationSteps" type="textarea" v-model="props.row.operationSteps" disabled
                  :autosize="true"></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="预期结果：" :span="6">
                <el-input v-if="props.row.expectedResult" type="textarea" v-model="props.row.expectedResult" disabled
                  :autosize="true"></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="实际结果：" :span="6">
                <el-input v-if="props.row.realResult" type="textarea" v-model="props.row.realResult" disabled
                  :autosize="true"></el-input>
              </el-descriptions-item>

              <el-descriptions-item label="备注：" :span="6">
                <el-input v-if="props.row.testCaseRemarks" type="textarea" v-model="props.row.testCaseRemarks" disabled
                  :autosize="true"></el-input>
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <!-- <el-table-column type="index" label="序号" width="60" align="center" sortable></el-table-column> -->
        <el-table-column label="项目分支" min-width="160" align="center">
          <template #="{ row }">
            <el-text :style="{ color: row.pNameBranch ? '#606266' : '#ccc' }">{{ row.pNameBranch ? row.pNameBranch : '—'
              }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="功能模块" width="240" align="center">
          <template #="{ row }">
            <el-text :style="{ color: row.funcModules ? '#606266' : '#ccc' }">{{ row.funcModules ? row.funcModules : '—'
              }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="二级功能模块" min-width="240" align="center">
          <template #="{ row }">
            <el-text :style="{ color: row.funcModulesChild ? '#606266' : '#ccc' }">{{ row.funcModulesChild ?
              row.funcModulesChild : '—' }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="用例名称" min-width="240" align="left">
          <template #="{ row }">
            <el-text :style="{ color: row.testCaseName ? '#606266' : '#ccc' }">{{ row.testCaseName ? row.testCaseName :
              '—' }}</el-text>
          </template>
        </el-table-column>
        <el-table-column label="优先级" width="160" align="center" show-overflow-tooltip>
          <template #="{ row }">
            <el-text :style="{ color: row.testCasePriority ? '#606266' : '#ccc' }">{{ row.testCasePriority ?
              row.testCasePriority : '—' }}</el-text>
          </template>
        </el-table-column>
        <!-- <el-table-column label="编写人" width="120" align="center">
          <template #="{ row }">
            <el-text :style="{ color: row.caseEditMembers ? '#606266' : '#ccc' }">{{ row.caseEditMembers !== '' ?
              row.caseEditMembers : '—' }}</el-text>
          </template>
        </el-table-column> -->
        <!-- <el-table-column align="right"  width="120" fixed="right">
          <template #header>
            <el-input v-model="search" size="small" placeholder="搜索" :prefix-icon="Search" />
          </template>
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)" :icon="Edit"></el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" :icon="Delete"></el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, PropType, onMounted, watch, computed, } from 'vue';
import { Delete, Edit, Search } from '@element-plus/icons-vue'
import { GetChildTestCaseList, GetFatherTestCaseList } from "@/api/newDemands/index";
import { ElMessage } from 'element-plus';


const emit = defineEmits(['add-case-success']);
const props = defineProps({
  childId: {
    type: Number as PropType<any>,
    required: true,
  },
  fatherId: {
    type: Number as PropType<any>,
    required: true,
  },
  isAllCase: {
    type: Boolean,
    required: true
  }
});

const loading = ref(false);
const isChildId = ref<any>(null);
const isFatherId = ref<any>(null);
const isAllCase = ref(false);
const requirementCaseList = ref<any>([]);// 所有项目测试用例
// const itemTestCaseRef = ref<InstanceType<typeof ElTable>>();
// const currentRow = ref();



// 监听 
watch(() => props, async (newData) => {
  if (!newData.isAllCase) {
    requirementCaseList.value = [];
    // if (newData.childId) {
    isAllCase.value = false;
    isChildId.value = newData.childId;
    await getRequirementCaseList();
  } else {
    isAllCase.value = true;
    isFatherId.value = newData.fatherId;
    await getRequirementCaseList();
  }
  // }
}, { immediate: true });



// TODO 获取所有测试用例
const getRequirementCaseList = async () => {
  loading.value = true;
  // 查看任务用例
  if (!isAllCase.value) {
    const { data } = await GetChildTestCaseList(isChildId.value);
    if (data.code === 200) {
      requirementCaseList.value = data.data;
      loading.value = false;
    } else {
      ElMessage.error(data.msg);
      loading.value = false;
      throw console.error(data.msg);
    };
  } else {
    const { data } = await GetFatherTestCaseList(isFatherId.value);
    if (data.code === 200) {
      requirementCaseList.value = data.data;
      loading.value = false;
    } else {
      ElMessage.error(data.msg);
      loading.value = false;
      throw console.error(data.msg);
    };
  }
  loading.value = false;
};


onMounted(async () => {
  await getRequirementCaseList();
})

</script>
<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  overflow: hidden;

  .test-add-btn {
    width: 100%;
    text-align: right;
    margin-bottom: 5px;
  }

  // 确保表格容器有合适的滚动行为
  :deep(.el-table) {
    max-height: calc(70vh - 60px);
    overflow-y: auto;
  }

  // 固定表格头部
  :deep(.el-table__header-wrapper) {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
  }
}

// .el-descriptions {
//   margin-top: 10px;
// }
.cell-item {
  display: flex;
  align-items: left;
}

.margin-top {
  padding: 10px 20px;
}
</style>